<mat-card class="mt-3">
  <form role="form" novalidate [formGroup]="blogForm" (ngSubmit)="saveBlog()">
    <div class="mb-3">
      <mat-form-field class="material-input-full">
        <mat-select placeholder="Category" [(ngModel)]="objBlog.categoryId" [formControl]="blogForm.controls['blogCategory']">
          <mat-option *ngFor="let obj of objCatList.dataList" [value]="obj._id">
            {{obj.categoryName}}
          </mat-option>
        </mat-select>
        <mat-error>
          <control-messages [isSubmitted]="isSubmitted" [control]="blogForm.controls['blogCategory']"></control-messages>
        </mat-error>
      </mat-form-field>
    </div>
    <div class="mb-3">
      <mat-form-field class="material-input-full">
        <input matInput placeholder="Blog Title" [(ngModel)]="objBlog.blogTitle" [formControl]="blogForm.controls['blogTitle']">
        <mat-error>
          <control-messages [isSubmitted]="isSubmitted" [control]="blogForm.controls['blogTitle']"></control-messages>
        </mat-error>
      </mat-form-field>
    </div>
    <div class="mb-3">
      <mat-form-field class="material-input-full">
        <textarea matInput placeholder="Blog Summary" matTextareaAutosize matAutosizeMinRows="2" matAutosizeMaxRows="5" [(ngModel)]="objBlog.blogSummary"
          [formControl]="blogForm.controls['blogSummary']"></textarea>
        <mat-error>
          <control-messages [isSubmitted]="isSubmitted" [control]="blogForm.controls['blogSummary']"></control-messages>
        </mat-error>
      </mat-form-field>
    </div>
    <div class="mb-3">
      <label>Blog Description</label>
      <tiny-editor module="blog" [isSubmitted]="isSubmitted" [value]="objBlog.blogDescription" [editorFormControl]="editorFormControl"
        (valueChange)="editorValueChange($event)"></tiny-editor>
    </div>
    <div class="form-group">
      <label>Tags </label>
      <rl-tag-input [(ngModel)]="objBlog.tags" placeholder="Add An tag" [formControl]="blogForm.controls['tags']" delimiterCode="188"
        [autoCompleteData]="autoCompleteData">
      </rl-tag-input>
      <mat-error>
        <control-messages [isSubmitted]="isSubmitted" [control]="blogForm.controls['tags']"></control-messages>
      </mat-error>
    </div>
    <div class="mb-3">
      <mat-form-field class="material-input-full">
        <input matInput placeholder="Blog Author" [(ngModel)]="objBlog.author" [formControl]="blogForm.controls['blogAuthor']">
        <mat-error>
          <control-messages [isSubmitted]="isSubmitted" [control]="blogForm.controls['blogAuthor']"></control-messages>
        </mat-error>
      </mat-form-field>
    </div>
    <div class="mb-3">
      <image-uploader [isSubmitted]="isSubmitted" [canvasSize]="canvasSize" [imageFormControl]="imageFormControl" (deleteImageEvent)="deleteImage($event)"
        [imageName]="objBlog.bannerImage" [drawImagePath]="drawImagePath" [isSubmitted]="isSubmitted" allowDelete="true" (fileSelectedEvent)="changeFile($event)">
      </image-uploader>
    </div>
    <div class="mb-3">
      <mat-form-field class="material-input-full">
        <input matInput placeholder="Banner Title" [(ngModel)]="objBlog.bannerImageTitle" [formControl]="blogForm.controls['bannerImageTitle']">
        <mat-error>
          <control-messages [isSubmitted]="isSubmitted" [control]="blogForm.controls['bannerImageTitle']"></control-messages>
        </mat-error>
      </mat-form-field>
    </div>
    <div class="mb-3">
      <mat-form-field class="material-input-full">
        <input matInput placeholder="Banner Alt Text" [(ngModel)]="objBlog.bannerImageAltText" [formControl]="blogForm.controls['bannerImageAltText']">
        <mat-error>
          <control-messages [isSubmitted]="isSubmitted" [control]="blogForm.controls['bannerImageAltText']"></control-messages>
        </mat-error>
      </mat-form-field>
    </div>
    <div class="mb-3">
      <mat-form-field class="material-input-full">
        <mat-select placeholder="Status" [(ngModel)]="objBlog.status" [formControl]="blogForm.controls['status']">
          <mat-option value="active">Active</mat-option>
          <mat-option value="outdated">OutDated</mat-option>
        </mat-select>
        <mat-error>
          <control-messages [isSubmitted]="isSubmitted" [control]="blogForm.controls['status']"></control-messages>
        </mat-error>
      </mat-form-field>
    </div>
    <div class="mb-3">
      <mat-checkbox [checked]="objBlog.active" formControlName="active" [(ngModel)]="objBlog.active">
        Active
      </mat-checkbox>
    </div>
    <div class="mb-3">
      <button mat-raised-button color="primary" type="submit"><i class="fas fa-save"></i> Save</button>
      <button mat-raised-button color="warn" type="button" (click)="triggerCancelForm()">Cancel</button>
    </div>
  </form>
</mat-card>
